<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景background</title>
    <style>
        ul{
            list-style: none;
        }
        .bgc{
            width: 300px;
            background-color: #f00;
        }
        .bgi{
            height: 300px;
            background-color: #ccc;
            background-image: url(../images/s1.jpg);
            background-repeat: no-repeat;
            /* background-position: left; */
            /* background-position: 100px 100px; */
            background-position: 100px center;
        }
        .list{
            /* list-style-type: square;
            list-style-position: inside; */
            background-color: #ccc;
        }
        .list li{
            background-color: #f00;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
    </ul>
    <p class="bgi">背景图</p>
    <p class="bgc">背景色</p>
</body>
</html>